<!-- 附件管理详情 -->
<template>
  <el-container class="attachmentDetails">
    <el-header height="36px">
      <header-title :title="$route.meta.title" />
    </el-header>
    <el-main class="mainDetails">
      <div>
        <SearchPanel title="查询条件">
          <div ref="queryFormBox" class="search-flex-box">
            <MyForm
              ref="formRef"
              v-model="queryParams"
              :form-option="formOption"
              :select-list="dicLists"
              @handleEvent="handleEvent"
            />
            <div class="searchBtn">
              <el-button type="primary" class="pms-button-primary" @click="doSearch">查询</el-button>
              <!-- <el-button size="mini" class="pms-button" @click="resetSearch">重置</el-button> -->
            </div>
          </div>
        </SearchPanel>
        <div>
          <SearchList title="查询数据" style="margin-top: 16px">
            <!-- <template #header-btn>
              <BtnConfig ref="btnConfigRef" :btn-configs="btnOption" />
            </template> -->
            <template #body>
              <AttachDetailList ref="attachDetailListRef" :queryParams="queryParams"/>
            </template>
          </SearchList>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import HeaderTitle from '@/components/basic/HeaderTitle'
import MyForm from '@/components/basic/myForm'
import SearchPanel from '@/components/basic/SearchPanel'
import SearchList from '@/components/basic/SearchList'
import AttachDetailList from './attachDetailList.vue'
// import BtnConfig from '@/components/basic/btnConfig.vue'
import SysConst from '@/common/const'
import { getDropdownData } from '@/api/common' // 字典接口
import { getNodeInfoApi } from '@/api/attachManagement/attachments/attachmentDetails'
import { getPrjStageApi } from '@/api/attachmentInfo'
import { formOption } from '.'

export default {
    name: 'AttachmentDetails',
    components: {
        HeaderTitle,
        MyForm,
        SearchPanel,
        SearchList,
        AttachDetailList
        // BtnConfig
    },
    data() {
        return {
            formOption,
            queryParams: {}, // 查询条件数据
            prjId: '', // 项目流水号
            dicLists: {} // 字典数据集合
        }
    },
    created() {
        this.prjId = this.$route.query.prjId
        this.getDictData()
        this.getPrjStage()
    },
    methods: {
        // 查看数据
        doSearch(item) {
            const params = {
                prjId: this.prjId,
                pageNum: item?.page || SysConst.CURRENT_PAGE,
                pageSize: item?.limit || SysConst.PAGESIZE,
                ...this.queryParams
            }
            this.$refs.attachDetailListRef.queryPrjFileInfo(params, item)
        },
        // 查询条件事件
        handleEvent(prop, val) {
            if (prop === 'prjStage') {
                this.getPrjNodeName(val)
                this.queryParams.prjNodeId = ''
            }
        },
        // 重置
        // resetSearch() {
        //     this.$refs.formRef.reset()
        //     this.doSearch({
        //         page: 1,
        //         limit: 10
        //     })
        // },
        async getDictData() {
            const arr = ['SIGN_STATE2']
            const promises = arr.map(item => getDropdownData(item))
            const results = await Promise.all(promises)
            arr.forEach((item, i) => {
                this.$set(this.dicLists, item, results[i].data ?? [])
            })
            this.$set(this.dicLists, 'FILE_UPLOAD_MODES', SysConst.UPLOAD_MODES)
        },
        // 获取项目阶段字典
        async getPrjStage() {
            const res = await getPrjStageApi()
            const data = res.data.map(item => ({
                dictId: item.key,
                dictName: item.value
            }))
            this.$set(this.dicLists, 'PRO_STAGE', data)
        },
        // 获取项目节点字典
        async getPrjNodeName(val) {
            if (!val) {
              return
            }
            const res = await getNodeInfoApi({ prjId: this.prjId, prjStage: val ?? '' })
            if (!res.data.length) {
                this.$message.info('此项目阶段下项目节点为空')
            }
            this.$set(this.dicLists, 'PRJ_NODE', res.data)
        }
    }
}
</script>

<style lang="scss" scoped>
.attachmentDetails {
    width: 100%;
}
.search-flex-box {
    // display: flex;
    // justify-content: space-between;
    height: auto;
}
.searchBtn {
    width: 100px;
    margin-left: auto;
    display: flex;
    margin-top: 4px;
    flex-direction: column;
    .el-button + .el-button {
        margin-left: 0;
        margin-top: 12px;
    }
}
.el-button + .el-button {
    margin-left: 0;
    margin-top: 6px;
}
.mainDetails {
    padding: 15px 25px;
}
</style>
